<template>
	<el-dialog
		v-model="isModifyShow"
		width="900"
		align-center
		title="编辑架构"
		:before-close="toCancle"
	>
		<div class="content">
			<div class="left-section">
				<!-- 左侧下拉框 -->
				<el-select v-model="selectValue" placeholder="请选择组件">
					<el-option
						v-for="item in components"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</el-select>

				<!-- 卡片列表 -->
				<div class="card-list">
					<el-card
						v-for="card in filteredCards"
						:key="card.id"
						:class="{ isSelect: card.id === adetail[selectValue] }"
					>
						<div class="card-img" @click="toSelect(card)">
							<img :src="card.imagePath" alt="组件图片" />
							<p>{{ selectValue }}</p>
						</div>
						<div class="card-content">
							<p>名称：{{ card.name.value }}</p>
							<p v-for="(obj, prop) in getCardContent(card)" :key="prop">
								{{ obj.key }}：{{ obj.value }}
							</p>
						</div>
					</el-card>
				</div>
			</div>

			<div class="right-section">
				<div class="img-div">
					<img class="bj" src="@/assets/images/jg1.png" alt="" />
					<img class="cpu-img" :src="aimg['cpu']" alt="" />
					<img class="flash-img" :src="aimg['flash']" alt="" />
					<img class="memory-img" :src="aimg['memory']" alt="" />
					<img class="acc-img" :src="aimg['acc']" alt="" />
				</div>
			</div>
		</div>
		<template #footer>
			<div class="footer">
				<el-button @click="toCancle">取消</el-button>
				<el-button type="primary" @click="toSubmit"> 确定 </el-button>
			</div>
		</template>
		<el-dialog v-model="isSave" width="500" title="保存" align-center>
			<div class="dialog-main">
				<p>命名：</p>
				<el-input v-model="a_name" clearable />
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="isSave = false">取消</el-button>
					<el-button type="primary" @click="toSave"> 确定 </el-button>
				</div>
			</template>
		</el-dialog>
	</el-dialog>
</template>

<script setup>
	import { computed, ref } from 'vue'
	import { ElMessage } from 'element-plus'
	import { userStore } from '@/store/user'
	import { saveFramework } from '@/api/framework'

	const user = userStore()

	const isModifyShow = defineModel('isModifyShow')
	const props = defineProps([
		'architectId',
		'sdetail',
		'simg',
		'accCards',
		'flashCards',
		'cpuCards',
		'memoryCards'
	])

	const emit = defineEmits(['submit', 'cancle'])

	const selectValue = ref('')
	const isSave = ref(false)
	const a_name = ref('')

	const componentKeys = ['cpu', 'memory', 'flash', 'acc']

	// 下拉框选项
	const components = [
		{ value: 'cpu', label: 'CPU（中央处理器）' },
		{ value: 'memory', label: 'SD_Memory（内存卡）' },
		{ value: 'flash', label: 'AHB_PFlash（闪存）' },
		{ value: 'acc', label: 'AHB_Accelerator（加速器）' }
	]

	// 根据选择过滤卡片
	const filteredCards = computed(() => {
		switch (selectValue.value) {
			case 'cpu':
				return props.cpuCards
			case 'memory':
				return props.memoryCards
			case 'flash':
				return props.flashCards
			case 'acc':
				return props.accCards
			default:
				return []
		}
	})

	const getCardContent = (card) => {
		const content = {}
		const regexToExclude = /^(id|name|imagePath)$/i
		for (const [key, value] of Object.entries(card)) {
			if (!regexToExclude.test(key)) {
				content[key] = value
			}
		}
		return content
	}

	const adetail = ref(
		componentKeys.reduce((acc, item) => {
			acc[item] = props.sdetail[item]
			return acc
		}, {})
	)

	const aimg = ref(
		componentKeys.reduce((acc, item) => {
			acc[item] = props.simg[item]
			return acc
		}, {})
	)

	const toSelect = (card) => {
		adetail.value[selectValue.value] = card.id
		aimg.value[selectValue.value] = card.imagePath
	}

	const toSubmit = () => {
		console.log(JSON.stringify(props.sdetail))
		console.log(JSON.stringify(adetail.value))

		for (const key in adetail.value) {
			if (adetail.value[key] === 0) {
				ElMessage.error('组件未选择完整')
				return
			}
		}
		if (JSON.stringify(props.sdetail) === JSON.stringify(adetail.value)) {
			ElMessage.warning('架构未发生改变')
			return
		}
		isSave.value = true
	}

	const clear = () => {
		selectValue.value = ''
		isSave.value = false
		a_name.value = ''
	}

	const toSave = async () => {
		if (a_name.value !== '') {
			const data = {
				architectName: a_name.value,
				flashId: adetail.value['flash'],
				cpuId: adetail.value['cpu'],
				memoryId: adetail.value['memory'],
				accId: adetail.value['acc'],
				userId: user.id
			}
			const rData = (await saveFramework(data)).data
			if (rData.code == 200) {
				ElMessage.success('架构保存成功')
				isSave.value = false
				clear()
				emit('submit')
			} else {
				ElMessage.success(rData.msg)
			}
		} else {
			ElMessage.error('请填写架构名称')
		}
	}

	const toCancle = () => {
		clear()
		emit('cancle')
	}
</script>

<style lang="scss">
	.el-dialog__header {
		font-size: 20px;
		font-weight: bolder;
		text-align: center;
	}
	.footer {
		.el-button {
			height: 40px;
			width: 120px;
			font-size: 18px;
		}
	}
	.content {
		height: 400px;
		display: flex;
		.left-section {
			width: 35%;
			.card-list {
				margin-top: 10px;
				border: 1px solid #dcdfe6;
				height: 95%;
				overflow: auto;
				padding: 5px 10px;
			}
			.isSelect {
				background: rgb(169, 255, 249);
			}
			.el-card {
				height: 180px;
				margin-bottom: 10px;
				.el-card__body {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
				}
			}
			.card-img {
				width: 120px;
				margin-right: 20px;
				border: 1px solid grey;
				border-radius: 5px;
				display: flex;
				flex-direction: column;
				align-items: center;
				cursor: pointer;
				&:hover {
					box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
				}
				img {
					width: 100px;
					margin: 5px 0;
				}
				p {
					width: 100%;
					height: 25px;
					line-height: 25px;
					text-align: center;
					font-size: 16px;
					background: red;
				}
			}

			.card-content {
				padding: 10px 0;
				flex: 1;
				p {
					font-size: 14px;
					line-height: 20px;
				}
			}
		}
		.right-section {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			.img-div {
				height: 80%;
				position: relative;
				.bj {
					height: 100%;
				}
				img[src=''] {
					display: none;
				}
				.cpu-img {
					height: 70px;
					position: absolute;
					left: 14%;
					top: 24%;
				}
				.flash-img {
					height: 78px;
					position: absolute;
					left: 20%;
					bottom: 12%;
				}
				.memory-img {
					height: 75px;
					position: absolute;
					right: 21%;
					top: 23%;
				}
				.acc-img {
					height: 80px;
					position: absolute;
					right: 14%;
					bottom: 12%;
				}
			}
		}
	}
</style>